$themes: (
  b2b: (
    main-color: #ed3129,
    sub-color: #333
  ),
  operator: (
    main-color: #3d7dfe
  )
);

// 根据主题名，获取不同的主题色值
@mixin themeMap {
  @each $theme-name, $theme-map in $themes {
    // !global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;

    // 判断 html 的 data-theme 的属性值 #{} 是 sass 的插值表达式
    // & sass 嵌套里的父容器标识 @content 是混合器插槽，像 vue 的 slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

@function themeGet($key, $isMatch) {
  // $theme-map 经过 themeMap 已经被提升成了全局变量
  @if ($isMatch) {
    @return map-get($theme-map, $key);
  }

  // do nothing
  @return null;
}

@mixin setColor($attr, $color) {
  @include themeMap {
    color: themeGet($color, $attr== "color");
    background-color: themeGet($color, $attr== "background");
    border-color: themeGet($color, $attr== "border");
  }
}

// 使用示例
.test {
  @include setColor("color", "main-color");
}

@keyframes bgPositionLoading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

